<template>
  <div class="container">
    <div style="">
      <div class="content_box">
        <div style="width: 47%;">
          <p>既往病史服务前</p>
          <div
            class="card_content"
            v-if="archiveFirst.hypoglycemiaIsExistText !== null && archiveFirst.hypoglycemiaIsExistText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">低血糖发生史</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">频率： {{ archiveFirst.hypoglycemiaFrequency }}</a-col>
                <a-col class="item" :span="24">原因： {{ archiveFirst.hypoglycemiaCause }}</a-col>
                <a-col class="item" :span="24">症状： {{ archiveFirst.hypoglycemiaSymptom }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.dnhsText !== null && archiveFirst.dnhsText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病高渗综合征发生史</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">频率： {{ archiveFirst.dnhsFrequency }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.ketoacidosisText !== null && archiveFirst.ketoacidosisText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病酮症酸中毒发生史</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">原因： {{ archiveFirst.ketoacidosisCause }}</a-col>
                <a-col class="item" :span="24">程度： {{ archiveFirst.ketoacidosisDegreeText }}</a-col>
                <a-col class="item" :span="24">发生频率： {{ archiveFirst.ketoacidosisFrequency }}</a-col>
                <a-col class="item" :span="24">尿酮体检查： {{ archiveFirst.ketoacidosisUrineKetoneText }}</a-col>
                <a-col class="item" :span="24">血胴体检查： {{ archiveFirst.ketoacidosisBloodKetone }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.lacticAcidosisText !== null && archiveFirst.lacticAcidosisText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病乳酸酸中毒发生史</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">频率： {{ archiveFirst.lacticAcidosisFrequency }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.kidneyText !== null && archiveFirst.kidneyText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">其他原因导致肾脏疾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">所患肾脏疾病： {{ archiveFirst.kidneyDisease }}</a-col>
                <a-col class="item" :span="24">所患肾脏疾病确诊日期： {{ archiveFirst.kidneyDiseaseDate }}</a-col>
                <a-col class="item" :span="24" v-for="item in archiveFirst.kidneyData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.otherDiseaseOther !== null && archiveFirst.otherDiseaseOther !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">其他病史</span>
              <!-- <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div> -->
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24" v-for="item in archiveFirst.otherDiseaseOther.split('、')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
        </div>
        <div style="width: 47%;">
          <p>既往病史服务后</p>
          <div
            class="card_content"
            v-if="archiveSummary.hypoglycemiaIsExistText !== null && archiveSummary.hypoglycemiaIsExistText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">低血糖发生史</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">频率： {{ archiveSummary.hypoglycemiaFrequency }}</a-col>
                <a-col class="item" :span="24">原因： {{ archiveSummary.hypoglycemiaCause }}</a-col>
                <a-col class="item" :span="24">症状： {{ archiveSummary.hypoglycemiaSymptom }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveSummary.dnhsText !== null && reparchiveSummaryort.dnhsText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病高渗综合征发生史</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">频率： {{ archiveSummary.dnhsFrequency }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.ketoacidosisText !== null && archiveSummary.ketoacidosisText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病酮症酸中毒发生史</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">原因： {{ archiveSummary.ketoacidosisCause }}</a-col>
                <a-col class="item" :span="24">程度： {{ archiveSummary.ketoacidosisDegreeText }}</a-col>
                <a-col class="item" :span="24">发生频率： {{ archiveSummary.ketoacidosisFrequency }}</a-col>
                <a-col class="item" :span="24">尿酮体检查： {{ archiveSummary.ketoacidosisUrineKetoneText }}</a-col>
                <a-col class="item" :span="24">血胴体检查： {{ archiveSummary.ketoacidosisBloodKetone }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.lacticAcidosisText !== null && archiveSummary.lacticAcidosisText !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">糖尿病乳酸酸中毒发生史</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">频率： {{ archiveSummary.lacticAcidosisFrequency }}</a-col>
              </a-row>
            </div>
          </div>
          <div class="card_content" v-if="archiveSummary.kidneyText !== null && archiveSummary.kidneyText !== '——'">
            <div class="item">
              <span style="font-size: 16px;color: #000;">其他原因导致肾脏疾病</span>
              <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div>
            </div>
            <div>
              <a-row>
                <a-col class="item" :span="24">所患肾脏疾病： {{ archiveSummary.kidneyDisease }}</a-col>
                <a-col class="item" :span="24">所患肾脏疾病确诊日期： {{ archiveSummary.kidneyDiseaseDate }}</a-col>
                <a-col class="item" :span="24" v-for="item in archiveSummary.kidneyData.split(';')" :key="item">{{
                  item
                }}</a-col>
              </a-row>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.otherDiseaseOther !== null && archiveSummary.otherDiseaseOther !== '——'"
          >
            <div class="item">
              <span style="font-size: 16px;color: #000;">其他病史</span>
              <!-- <div style="float:right"><a-badge color="red" /><span style="font-size:12px">已确诊</span></div> -->
            </div>
            <div>
              <a-row>
                <a-col
                  class="item"
                  :span="24"
                  v-for="item in archiveSummary.otherDiseaseOther.split('、')"
                  :key="item"
                  >{{ item }}</a-col
                >
              </a-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Anamnesis',
  props: ['archiveFirst', 'archiveSummary'],
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }
@media print {
  .container {
    page-break-inside: avoid;
  }
}
.container {
  padding: 50px 24px 0 24px;
}

.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content_box {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    color: #000;
  }
}
.card_content {
  break-inside: avoid;
  // display: inline-block;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
</style>

